import React, { useState, useEffect, useRef } from "react"
import {CircleX} from "lucide-react";

// let url = 'https://scripture01-1322465390.cos.ap-nanjing.myqcloud.com/batch01png/20250507_2sets/460/460-page-1.png'

interface CharDetailModalProps {
  char: any,
  onCancel: () => void,
}

export default function CharDetailModal({ char, onCancel }: CharDetailModalProps) {
  const [w, setW] = useState<number>(0)
  const [h, setH] = useState<number>(0)
  const [box, setBox] = useState<any>({})
  const [ratio, setRatio] = useState<number>(0)

  useEffect(() => {
    let m = new Image()
    m.src = char.yeUrl
    m.onload = (e: any) => {
      console.dir(e.target)
      const rate = (window.innerWidth * 0.8) / e.target.naturalWidth
      console.log(rate, e.target.naturalHeight, e.target.naturalWidth)
      setW(window.innerWidth * 0.8)
      setH(e.target.naturalHeight * rate)
      let po = JSON.parse(char.position)
      setBox({
        left: po[0] * rate,
        top: po[1] * rate,
        width: (po[2] - po[0]) * rate + 2,
        height: (po[3] - po[1]) * rate + 2,
      })
    }
  }, [char]);

  return (
    <div className="fixed left-0 top-0 w-[100vw] h-[100vh] bg-amber-100 z-30 overflow-auto">
      <CircleX className="absolute right-4 top-4 cursor-pointer" onClick={onCancel} />
      <div className="m-auto origin-top-left relative" style={{
        backgroundImage: `url(${char.yeUrl})`,
        backgroundSize: "100%",
        width: w,
        height: h,
      }}>
        <div className="absolute border-2 border-red-600" style={box}></div>
      </div>
    </div>
  )
}